<?php
/**
 * This file is view of change color page
 * @package Edit Image Color
 */
?>
<style>
    #color-select .jcarousel-prev {
        background: url("<?php echo plugins_url('', __FILE__); ?>/images/back.png") no-repeat scroll 0 0 transparent;
        cursor: pointer;
        float: left;
        height: 56px;
        left: 0;
        position: absolute;
        top: 46px;
        width: 27px;
        z-index: 100;
    }
    #color-select .jcarousel-next {
        background: url("<?php echo plugins_url('', __FILE__); ?>/images/next.png") no-repeat scroll 0 0 transparent;
        cursor: pointer;
        float: left;
        height: 56px;
        position: absolute;
        right: -7px;
        top: 46px;
        width: 27px;
        z-index: 100;
    }
</style>
<script type="text/javascript">

    var image_select = "<?php echo $this->image; ?>";
    var color_select = "normal";


    function startCrop() {
        var url = $("#target_image").attr("src");
        $("#target_image_loading").show();
        $.ajax({
            url: "",
            type: "POST",
            data: {
                url: url,
                color_select: color_select,
            },
            dataType: "json",
            success: function(data) {
                if (data == 1) {
                    $("#message").show();
                    $("#target_image_loading").hide();
                }
            }
        });
    }

    function chooseImage(url) {
        createColorEffect("<?php echo plugins_url('', __FILE__); ?>/caman_proxy.php?h=80&url=" + url);
    }
    jQuery(document).ready(function() {
        $ = jQuery;
        convertTagrgetImageObject = $("#convertImageContainer").html();
        chooseImage('<?php echo $this->image_thumbnail; ?>');
        Caman("#convert_target_image", image_select, function() {
            this.render();
        })
        $(".FilterSetting input").change(function() {
            $(this).parent().find(".FilterValue").text($(this).val() / 100);
        })
        $("#blur-block").draggable({containment: "parent"});
        $("#blur-block").resizable();
    });

</script>
<div class="wrap">
    <?php screen_icon('upload'); ?>
    <h2>Change image color with instagram effect</h2>
    <br/>
    <div id="message" style="display:none" class="updated below-h2"><p>An image have been created with new color, go to <a href="<?php echo admin_url('admin.php?page=wp_plugin_edit_image_color') ?>">media library</a> to see</p></div>
    <div id="container-image">
        <img id="target_image"style="z-index:999;"src="<?php echo $this->image; ?>" />
        <div id="blur-block" style="left: -10px;">

        </div>
        <div style="" id="convertImageContainer"><canvas style="display: none" id="convert_target_image"></canvas></div>
        <div id="target_image_loading" style="display: none;"><img width="150px" src="<?php echo plugins_url('', __FILE__); ?>/images/processing.gif"></div>
    </div>

    <div id="image-detail" style="right: 0px; position: fixed; top: 87px;">
        <div class="postbox-container" id="postbox-container-1">
            <div class="meta-box-sortables ui-sortable" id="side-sortables"><div class="postbox " id="submitdiv">

                    <div class="inside">
                        <div id="submitpost" class="submitbox">
                            <div id="minor-publishing">
                                <div id="misc-publishing-actions">
                                    <div class="misc-pub-section curtime"><h2 style="padding: 0;"><?php echo $this->post->post_title; ?></h2></div>
                                    <div class="misc-pub-section curtime">
                                        <span id="timestamp">Modified on: <b><?php echo $this->post->post_modified ?></b></span>
                                    </div><!-- .misc-pub-section -->

                                    <div class="misc-pub-section">
                                        <label for="attachment_url">File URL:</label>
                                        <input type="text" value="<?php echo $this->image; ?>" name="attachment_url" readonly="readonly" class="widefat urlfield">
                                    </div>
                                </div><!-- #misc-publishing-actions -->
                                <div class="clear"></div>
                            </div><!-- #minor-publishing -->

                            <div id="major-publishing-actions">
                                <div id="publishing-action">
                                    <span class="spinner"></span>
                                    <input type="submit" onclick="startCrop()"value="Update" accesskey="p" id="publish" class="button-primary button-large" name="save">
                                </div>
                                <div class="clear"></div>
                            </div><!-- #major-publishing-actions -->
                        </div>

                    </div>
                </div>
            </div>
            <div class="imgedit-group">
                <div class="imgedit-group-top">
                    <a class="imgedit-help-toggle" onclick="openEditContainer('color-image');" href="#"><strong>Color Adjust</strong></a>
                    <div id="color-image"class="imgedit-help" style="display: none; ">
                        <div class="Filter">
                            <div class="FilterName">
                                <label>Red</label>
                            </div>

                            <div class="FilterSetting">
                                <input id="RedRange" type="range" min="-100" max="100" step="1" value="0">
                                <span class="FilterValue">0</span>
                            </div>
                        </div>

                        <div class="Filter">
                            <div class="FilterName">
                                <label>Green</label>
                            </div>
                            <div class="FilterSetting">
                                <input id="GreenRange" type="range" min="-100" max="100" step="1" value="0">
                                <span class="FilterValue">0</span>
                            </div>
                        </div>

                        <div class="Filter">
                            <div class="FilterName">
                                <label>Blue</label>
                            </div>

                            <div class="FilterSetting">
                                <input id="BlueRange" type="range" min="-100" max="100" step="1" value="0">
                                <span class="FilterValue">0</span>
                            </div>
                        </div>
                        <div id="major-publishing-actions">
                            <div id="publishing-action">
                                <span class="spinner"></span>
                                <input type="button" onclick="adjustColor()"value="Update" accesskey="p" id="publish" class="button-primary button-large" name="save">
                                <input type="button" onclick="resetImage()"value="Reset" accesskey="p" id="publish" class="button-primary button-large" name="reset">
                            </div>
                            <div class="clear"></div>
                        </div><!-- #major-publishing-actions -->
                    </div>
                </div>
            </div>
            <div class="imgedit-group">
                <div class="imgedit-group-top">
                    <a class="imgedit-help-toggle" onclick="openEditContainer('blur-image');
        $('#blur-block').width(100).height(100).show().animate({left: '40%'});" href="#"><strong>Blur Image</strong></a>
                    <div id="blur-image"class="imgedit-help" style="display: none; ">
                        <div class="Filter">
                            <p>Move white block to choose the position.</p>
                        </div>

                        <div id="major-publishing-actions">
                            <div id="publishing-action">
                                <span class="spinner"></span>
                                <input type="button" onclick="blurImage()"value="Update" accesskey="p" id="publish" class="button-primary button-large" name="save">
                                <input type="button" onclick="resetImage()"value="Reset" accesskey="p" id="publish" class="button-primary button-large" name="reset">
                            </div>
                            <div class="clear"></div>
                        </div><!-- #major-publishing-actions -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="color-select-container" style="float: left;width: 100%">
        <p>Click to change image color</p >
        <div id="color-select">           
            <ul id="container-list-color" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 1506px; ">
                <li>
                    <div onclick="addEffect('normal')" class="color-item" >
                        <canvas id="normal-select"></canvas>
                        <p>Normal</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('vintage')" class="color-item" >
                        <canvas id="vintage-select"></canvas>
                        <p>Vintage</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('lomo')" class="color-item" >
                        <canvas id="lomo-select"></canvas>
                        <p>Lomo</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('clarity')" class="color-item" >
                        <canvas id="clarity-select"></canvas>
                        <p>Clarity</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('sincity')" class="color-item" >
                        <canvas id="sincity-select"></canvas>
                        <p>Sin City</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('sunrise')" class="color-item" >
                        <canvas id="sunrise-select"></canvas>
                        <p>Sunrise</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('crossProcess')" class="color-item" >
                        <canvas id="crossProcess-select"></canvas>
                        <p>Cross Process</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('orangePeel')" class="color-item" >
                        <canvas id="orangePeel-select"></canvas>
                        <p>Orange Peel</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('love')" class="color-item" >
                        <canvas id="love-select"></canvas>
                        <p>Love</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('grungy')" class="color-item" >
                        <canvas id="grungy-select"></canvas>
                        <p>Grungy</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('jarques')" class="color-item" >
                        <canvas id="jarques-select"></canvas>
                        <p>Jarques</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('pinhole')" class="color-item" >
                        <canvas id="pinhole-select"></canvas>
                        <p>Pinhole</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('oldBoot')" class="color-item" >
                        <canvas id="oldBoot-select"></canvas>
                        <p>Old Boot</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('glowingSun')" class="color-item" >
                        <canvas id="glowingSun-select"></canvas>
                        <p>Glowing Sun</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('hazyDays')" class="color-item" >
                        <canvas id="hazyDays-select"></canvas>
                        <p>Hazy Days</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('herMajesty')" class="color-item" >
                        <canvas id="herMajesty-select"></canvas>
                        <p>Her Majesty</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('nostalgia')" class="color-item" >
                        <canvas id="nostalgia-select"></canvas>
                        <p>Nostalgia</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('hemingway')" class="color-item" >
                        <canvas id="hemingway-select"></canvas>
                        <p>Hemingway</p>
                    </div>
                </li>
                <li>
                    <div onclick="addEffect('concentrate')" class="color-item" >
                        <canvas id="concentrate-select"></canvas>
                        <p>Concentrate</p>
                    </div>
                </li>
            </ul>
        </div>

    </div>
